/**
 * 通用方法封装处理
 */

/** 创建选项卡 */
function createMenuItem(dataUrl, menuName, id, isRefresh) {
    var panelUrl = window.frameElement.getAttribute('data-id');
    dataIndex = random(1, 100), flag = true;
    if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
    var topWindow = $(window.parent.document);

    // 选项卡菜单已存在
    $('.J_menuTab', topWindow).each(function () {
        if ($(this).data('id') == dataUrl) {
            if (!$(this).hasClass('active')) {
                $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                scrollToTab(this);
                // 显示tab对应的内容区
                $('.J_mainContent .J_iframe', topWindow).each(function () {
                    if ($(this).data('id') == dataUrl) {
                        $(this).show().siblings('.J_iframe').hide();
                        return false;
                    }
                });
            }
            if (isRefresh) {
                refreshTab();
            }
            flag = false;
            return false;
        }
    });
    // 选项卡菜单不存在
    if (flag) {
        var str = '<a href="javascript:;" class="active J_menuTab noactive" data-id="' + dataUrl + '" data-panel="' + panelUrl + '">' + menuName + ' <i class="fa" style="font-size: 16px;font-weight: bold">×</i></a>';
        $('.J_menuTab', topWindow).removeClass('active');

        // dataUrl += "?" + id + "";
        // 添加选项卡对应的iframe
        var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" data-panel="' + panelUrl + '" seamless></iframe>';
        $('.J_mainContent', topWindow).find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);

        // window.parent.$.modal.loading("数据加载中，请稍后...");
        // $('.J_mainContent iframe:visible', topWindow).load(function () {
        //     window.parent.$.modal.closeLoading();
        // });

        // 添加选项卡
        $('.J_menuTabs .page-tabs-content', topWindow).append(str);
        scrollToTab($('.J_menuTab.active', topWindow));
    }
    return false;
}

// 指定随机数返回
function random(min, max) {
    return Math.floor((Math.random() * max) + min);
}

// 刷新iframe
function refreshTab() {
    var topWindow = $(window.parent.document);
    var currentId = $('.page-tabs-content', topWindow).find('.active').attr('data-id');
    var target = $('.J_iframe[data-id="' + currentId + '"]', topWindow);
    var url = target.attr('src');
    target.attr('src', url).ready();
}

// 滚动到指定选项卡
function scrollToTab(element) {
    var topWindow = $(window.parent.document);
    var marginLeftVal = calSumWidth($(element).prevAll()),
        marginRightVal = calSumWidth($(element).nextAll());
    // 可视区域非tab宽度
    var tabOuterWidth = calSumWidth($(".content-tabs", topWindow).children().not(".J_menuTabs"));
    //可视区域tab宽度
    var visibleWidth = $(".content-tabs", topWindow).outerWidth(true) - tabOuterWidth;
    //实际滚动宽度
    var scrollVal = 0;
    if ($(".page-tabs-content", topWindow).outerWidth() < visibleWidth) {
        scrollVal = 0;
    } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
        if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
            scrollVal = marginLeftVal;
            var tabElement = element;
            while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content", topWindow).outerWidth() - visibleWidth)) {
                scrollVal -= $(tabElement).prev().outerWidth();
                tabElement = $(tabElement).prev();
            }
        }
    } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
        scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
    }
    $('.page-tabs-content', topWindow).animate({marginLeft: 0 - scrollVal + 'px'}, "fast");
}

//计算元素集合的总宽度
function calSumWidth(elements) {
    var width = 0;
    $(elements).each(function () {
        width += $(this).outerWidth(true);
    });
    return width;
}


/*--------------------------------------------------------------------------------*/

// 图片导出
function exportArea() {
    $(".exportOper1").removeClass("wrapper wrapper-content animated fadeInRight");
    $(".exportOper2").removeClass("row");
    $(".exportArea").css("background","#FFF");
    /*通过上面的div class="exportArea" 获取到canvas画布*/
    html2canvas(document.querySelector(".exportArea")).then(canvas => {
        //document.body.appendChild(canvas);/*这是直接把画布图片追加到页面上，页面上直接就能看到*/
        // var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // 通过canvas画布生成的图片的url
        //window.location.href= imgURL;/*这是直接通过上面获取的链接直接下载，这个下载很粗糙，下载的图片没有后缀名，虽然可以打开为图片；故而优化出一下方法*/
        /**
         * 获取mimeType
         * @param  {String} type the old mime-type
         * @return the new mime-type
         */
        var type = 'png';
        var imgData = canvas.toDataURL(type);

        var _fixType = function(type) {
            type = type.toLowerCase().replace(/jpg/i, 'jpeg');
            var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
        };
        // 加工image data，替换mime type
        imgData = imgData.replace(_fixType(type), 'image/octet-stream');

        /**
         * 在本地进行文件保存
         * @param  {String} data     要保存到本地的图片数据
         * @param  {String} filename 文件名
         */
        var saveFile = function(data, filename) {
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        };

        // 下载后的文件名
        var filename = '导出' + (new Date()).getTime() + '.' + type;
        // download
        saveFile(imgData, filename);
    });
    $(".exportOper1").addClass("wrapper wrapper-content animated fadeInRight");
    $(".exportOper2").addClass("row");
    $(".exportArea").css("background","none");
}